<template>
	<view class="content">
		<!-- 导航栏 -->
	<!-- 	<view class="wx-nav">
			<view class="iconfont icon-fangdajing icontitle">
			</view>
			<text>尚衣阁</text>
			<view class="iconfont icon-xiaoxi icontitle">
			</view>
		</view> -->

		<!-- 轮播图区域 -->
		<scroll-view scroll-x="true" class='scroll-content' :scroll-into-view='scrollIntoIndex'>
			<view :id="'top'+index" class='scroll-item' v-for='(item,index) in topBar' :key='index'
				@tap='changeTab(index)'>
				<text :class='topBarIndex===index? "f-active-color":"f-color"'>
					{{item.name}}
				</text>
			</view>
		</scroll-view>

		<!-- 其他数据区域： -->
		<swiper @change='onChangeTab' :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
			<swiper-item v-for='(item,index) in newTopBar' :key='index'>

				<scroll-view scroll-y="true" @scrolltolower='loadMore(index)' :style="'height:'+clentHeight+'px;'">
					<block v-if="item.data.length > 0">

						<block v-for="(k,i) in item.data" :key="i">
							<!-- 推荐模块 -->
							<IndexSwiper v-if='k.type==="swiperList"' :dataList='k.data' />

							<template v-if='k.type==="recommendList"'>
								<Recommend :dataList='k.data' />
								<Cart cardTitle='猜你喜欢' />
							</template>

							<!-- 其他模块：运动、户外、美妆... -->
							<Banner v-if='k.type==="bannerList"' :dataList='k.imgUrl' />

							<template v-if='k.type==="iconsList"'>
								<Icons :dataList='k.data' />
								<Cart cardTitle='热销爆品' />
							</template>

							<template v-if='k.type==="hotList"'>
								<Hot :dataList='k.data' />
								<Cart cardTitle='推荐店铺' />
							</template>

							<template v-if='k.type==="shopList"'>
								<Shop :dataList='k.data' />
								<Cart cardTitle='为您推荐' />
							</template>

							<CommodityList v-if='k.type==="commodityList"' :dataList='k.data' />

						</block>
					</block>
					<view class="" v-else>
						暂无数据...
					</view>
					<view class='load-text f-color'>
						{{item.loadText}}
					</view>

				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		components: {
			Shop,
			Hot,
			IndexSwiper,
			Recommend,
			Cart,
			CommodityList,
			Banner,
			Icons
		},
		data() {
			return {
				// 顶部栏块选中的索引
				topBarIndex: 0,
				// 顶栏跟随的索引id值
				scrollIntoIndex: 'top0',
				// 内容块的高度值
				clentHeight: 0,
				// 底部栏块数据：
				topBar: [],
				"newTopBar": [], // 承载数据

			}
		},

		methods: {
			//点击顶栏
			changeTab(index) {
				if (this.topBarIndex === index) {
					return;
				}
				this.topBarIndex = index;
				this.scrollIntoIndex = 'top' + index;
				// console.log(this.newTopBar[this.topBarIndex].load);
				//每一次滑动==》赋值first
				if (this.newTopBar[this.topBarIndex].load === 'first') {
					this.addData();
				}
			},

			// 滑动
			onChangeTab(e) {
				// console.log(e.detail.current); // 获取滑块下面轮播图索引
				this.changeTab(e.detail.current) // 传索引给changeTab事件
			},

			// 请求首页(推荐)的数据：
			init() {

				$http.request({
					url: '/index_list/data'
				}).then(res => {
					// console.log(res);
					this.topBar = res.topBar
					this.newTopBar = this.initData(res)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			// 添加数据：加载首页不同的数据:
			initData(res) {
				// console.log(res);
				let arr = []
				for (let i = 0; i < this.topBar.length; i++) {
					let obj = {
						data: [],
						load: "first",
						loadText: "上拉加载更多..."
					}
					//获取首次数据
					if (i == 0) {
						obj.data = res.data;
					}
					arr.push(obj)
				}

				return arr;
			},

			// 获取可视区域高度【兼容】
			getClientHeight() {
				const res = uni.getSystemInfoSync(); // 同步获取系统信息
				// console.log(res.platform,res.statusBarHeight);
				const system = res.platform; // ios
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === 'android') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}
			},

			// 请求显示不同数据：
			addData(callback) {
				//拿到索引
				let index = this.topBarIndex;
				//拿到id===>不同的板块
				let id = this.topBar[index].id;
				//请求不同的数据
				let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1;
				// console.log(page);
				// console.log(id);
				
                //请求数据
				$http.request({
					url: '/index_list/' + id + '/data/' + page + ''
				}).then(res => {
					this.newTopBar[index].data = [...this.newTopBar[index].data, ...res];
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})

				})
				// console.log(this.newTopBar[index].data);

				// 当请求结束后，重新赋值
				// console.log(this.newTopBar[index].load);
				this.newTopBar[index].load = 'last'

				if (typeof callback === 'function') {
					callback();
				}
			},

			//上拉加载更多
			loadMore(index) {
				this.newTopBar[index].loadText = '加载中...';
				//请求完数据 ，文字提示信息又换成【上拉加载更多...】
				this.addData(() => {
					this.newTopBar[index].loadText = '上拉加载更多...';
				})
			}
		},

		onLoad() {
			this.init()
		},

		// 监听页面初级渲染：
		onReady() {
			this.getClientHeight()

			uni.getSystemInfo({
				success: (res) => {
					// console.log(res.windowHeight);
					// 数据区域的高度=可视区域高度-顶部tab
					this.clentHeight = res.windowHeight - uni.upx2px(80)
				}
			})
		},
		
		// 监听原生标题栏点击事件：
		onNavigationBarButtonTap(e){
			if(e.float=='left'){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		},
	}

	import $http from '@/common/api/request.js'
	import IndexSwiper from '@/components/index/indexSwiper.vue'
	import Recommend from '@/components/index/Recommend.vue'
	import Banner from '@/components/index/Banner.vue'
	import Icons from '@/components/index/Icons.vue'
	import Hot from '@/components/index/Hot.vue'
	import Shop from '@/components/index/Shop.vue'
	import Cart from '@/components/common/Cart.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
</script>

<style scoped>
	.wx-nav {
		height: 100rpx;
		width: 100%;
		line-height-step: 10rpx;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.icontitle {
		font-size: 24px;
	}

	.scroll-content {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 20rpx;
		font-size: 36rpx;
	}

	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49BDFB;
	}

	.load-text {
		border-top: 2rpx solid #636263;
		line-height: 60rpx;
		text-align: center;
	}
</style>